<template>
  <div style="display: inline-block;padding-left: 15px;">
    <tiny-dropdown
        split-button
        :type="type"
        :size="size"
        trigger="click"
        @button-click="search"
        @item-click="itemClick"
        :show-timeout="10"
    >
      <template #default>
        <TinyIconSearch /> <span style="margin-left: 5px;">搜索</span>
      </template>
      <template #dropdown>
        <tiny-dropdown-menu>
          <tiny-dropdown-item :icon="TinyIconRefresh" label="reset">重置</tiny-dropdown-item>
          <tiny-dropdown-item :icon="TinyIconShare" label="exout">导出</tiny-dropdown-item>
        </tiny-dropdown-menu>
      </template>
    </tiny-dropdown>
  </div>
</template>
<script setup>
import {ref} from "vue";
import {TinyDropdown, TinyDropdownItem, TinyDropdownMenu} from "@opentiny/vue";
import {iconRefresh, iconSearch, iconShare} from "@opentiny/vue-icon";
const TinyIconShare = iconShare()
const TinyIconRefresh = iconRefresh()
const TinyIconSearch = iconSearch()
const emit = defineEmits(['search', 'reset'])
const props = defineProps({
  inject: {type: Boolean, default: false},
  type: {type: String, default: ''},
  size: {type: String, default: 'small'},
})
const fApi = ref({})
const search = () =>{
  if(props.inject) {
    emit('search', fApi.value)
  }
  else {
    emit('search')
  }
}
const itemClick = (data) => {
  if(data.vm.label === 'reset') {
    if(props.inject) {
      emit('reset', fApi.value)
    }
    else {
      emit('reset')
    }
  }
  if(data.vm.label === 'exout') {
    if(props.inject) {
      emit('exout', fApi.value)
    }
    else {
      emit('exout')
    }
  }
}

const setApi = (api) => {
  fApi.value = api
}


defineExpose({ setApi})

</script>
<style scoped lang="scss">

</style>